<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本纹理叠加</title>
    <link rel="stylesheet" href="./index.css">
    <script src="../ctx_blender.js"></script>
</head>
<body>
    <!--css实现-->
    <h2 class="pattern-overlay">
        <span data-text="css纹理叠加"></span>
        css纹理叠加
    </h2>

    <!--svg实现的更具兼容性-->
    <svg width='360' height='120'>
        <defs>
            <filter id="blend">
                <feImage xlink:href='../images/kbg.png' result='patternSource' x='0' y='0' width='360' height='120' />
                <feBlend mode='overlay' in='SourceGraphic' in2='patternSource' />
            </filter>
            <linearGradient id="gradient" x1='0' y1='0' x2='0' y2='1'>
                <stop offset='0%' stop-color='green'></stop>
                <stop offset='100%' stop-color='red'></stop>
            </linearGradient>
            <pattern id="pattern" width='360' height='120' patternUnits='userSpaceOnUse'>
                <rect x="0" y="0" width="100%" height="100%" fill='url(#gradient)' filter='url(#blend)'></rect>
            </pattern>
        </defs>
        <text x='0' y='60' font-family='Microsoft Yahei' font-size='60' font-weight='900' fill='url(#pattern)'>
            SVG纹理叠加
        </text>
    </svg>

    <!--canvas更具兼容性和易用性-->
    <img src="../images/pattern.png" id="img" style="display:none;" alt="">
    <canvas style="display:block;" id="c" width="650" height="365"></canvas>
<script src="./index.js"></script>
</body>
</html>